<!--
* @Author: 张昊
* @Date:  2022-10-25 16:57:10
* @FilePath: /pages/subscribe/details/details.vue
* @Description: 预约详情
-->
<template>
	<view class="details">
		<view class="my-head"></view>
		<view class="my-top">
			<image :src="item.image" class="my-top-img"></image>
			<view class="my-top-flex">
				<view class="my-top-title">{{ item.teacher_name }}</view>
				<view>职称：{{ item.title }}</view>
			</view>
		</view>
		<!-- <view class="my-top"  @tap="clickLogin">
			<view class="my-top-img top-img"><u--image width="64" height="64" :src="rawData.avatarUrl" shape="circle"></u--image></view>
			<view class="my-top-flex">
				<view class="my-top-title">{{ rawData.nickName }}</view>
			</view>
		</view> -->
		<view class="my-content">
			<view class="img-list">
				<!-- <view class="img-text">
					专业方向:
					<view class="tag" v-for="(unit, index) in item.type_list" :key="index"><u-tag :text="unit.type_name" plain size="mini" type="warning"></u-tag></view>
				</view> -->
				<view class="img-text" v-if="item.address">
					院校:
					<view class="tag"><u-tag :text="item.address" plain size="mini" type="warning"></u-tag></view>
				</view>

				<!-- <view class="img-text">
					可上课时间段:
					<view class="times">
						<view class="time" v-for="unit in time" :key="unit">
							<u-tag @click="clickTag(unit)" :text="unit.times" :plain="unit.type != 'warning'" size="mini" :type="unit.is_allow"></u-tag>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="my-content" style="margin-top: 13px;">
			<view class="img-list">
				<view class="img-text"><txt-title title="专业方向:"></txt-title></view>
				<!-- <view class="img-text" v-html="item.content"></view> -->
				<view class="tags">
					<view class="tag" v-for="(unit, index) in item.type_list" :key="index"><u-tag :text="unit.type_name" plain size="mini" type="warning"></u-tag></view>
				</view>
			</view>
		</view>
		<view class="block"></view>
		<view class="foods">
			<view class="buttons"><u-button type="primary" @click="clickNav" text="立即预约"></u-button></view>
		</view>
	</view>
</template>

<script>
import {
	counselTimes // 获取时间段
} from '@/common/api.js';
export default {
	data() {
		return {
			item: {},
			time:[]
		};
	},
	methods: {
		// 点击时间段标签
		clickTag(item) {
			if (item.type != 'error') {
				this.time.forEach(e => {
					if (e.type != 'error') e.type = 'success';
				});
				item.type = 'warning';
				this.params.times_id = item.id;
				console.log('111', this.time, item.type);
			}
		},
		// 点击跳转
		clickNav() {
			// 点击之后跳转到预约接口
			uni.navigateTo({
				url: '/pages/subscribe/details/detail/detail'
			});
		}
	},
	async onLoad(params) {
		this.item = uni.getStorageSync('subscribeDetails');
		console.log('params', this.item);
		// = JSON.parse(params.item);
	let { data } =	await counselTimes({ teacher_id: this.item.id, day: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') });
	this.time = data;
	}
};
</script>

<style lang="scss">
.my-head {
	background: #6c7df1;
	height: 50px;
}
.lz-status_bar {
	background-color: #6c7df1;
}
.my-top {
	background: #6c7df1;
	display: flex;
	align-items: flex-start;
	padding: 22px;
	color: #fff;
	font-size: 14px;
	height: 122px;
}
.my-top-img {
	width: 164rpx;
	height: 164rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}

.top-img {
	width: 130rpx;
}
.my-top-title {
	font-size: 16px;
}

.my-top-flex {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	height: 64px;
	justify-content: center;
}

.my-content {
	background: #fff;
	width: 90%;
	margin: 0 auto;
	margin-top: -22px;
	padding: 15px 5px 10px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	.img-list {
		width: 90%;
		.img-text {
			display: flex;
			margin: 28rpx 0;
		}
		.tags {
			display: flex;
			flex-wrap: wrap;
			.tag {
			min-width: 260rpx;
				margin: 14rpx;
			}
		}
		.times {
			display: flex;
			flex-wrap: wrap;
			.time {
				width: 180rpx;
				margin: 14rpx;
			}
		}
	}
}
.buttons {
	margin: 28rpx;
}
.foods {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 130rpx;
	background-color: #fff;
	box-shadow: #dfdfdf 0px 0px 2px 1px;
}
.block {
	height: 130rpx;
}
</style>
